<template>
  <div class="article-container">
    <el-card class="filter-card">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item to="/gome">首页</el-breadcrumb-item>
        <el-breadcrumb-item>流量分析</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- /数据筛选表单 -->
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
                根据筛选条件共查询到 {{ flows.length }} 条结果：
            </div>
      <el-table :data="flows.slice(
          (currentPage - 1) * pagesize,
          currentPage * pagesize
      )" stripe style="width: 100%" class="list-table" size="mini" v-loading="loading">
        <el-table-column prop="title" label="标题">
        </el-table-column>
        <el-table-column prop="click_num" label="点击量">
        </el-table-column>
        <el-table-column prop="forward" label="转发量">
        </el-table-column>
        <el-table-column width="200px" label="操作">
          <!-- 如果需要自定义表格列模板，则把需要自定义的内容放到 template 里面 -->
          <template slot-scope="{row,$index}">
            <el-button size="mini" type="danger" icon="el-icon-delete" circle @click="onDeleteFlows(row.id)">
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination layout="  prev, pager, next, sizes, jumper" :page-sizes="[5, 10]" :page-size="pagesize"
        :total="flows.length" :pager-count="5" :current-page="currentPage" @current-change="handleCurrentChange"
        @size-change="handleSizeChange">
      </el-pagination>
      <!-- /列表分页 -->
    </el-card>
  </div>
</template>
  
<script>
import { getFlows, deleteFlows } from '@/api/flow'

export default {
  name: 'FlowsIndex',
  data() {
    return {
      flows: [], // 评论数据列表
      totalCount: 0, // 总数据条数
      status: null, // 查询评论的状态，不传就是全部
      loading: true, // 表单数据加载中 loading
      currentPage: 1, //展示第几页
      pagesize: 5, //每页的数据条数
      comment_status: true,
    }
  },
  async created() {
    this.loadFlows()
  },

  methods: {
    //获取流量列表
    async loadFlows() {
      // 展示加载中 loading
      this.loading = true;
      getFlows().then((res) => {
        console.log(res, 'flow');
        this.flows = res || [];
        console.log(this.flows);
      });
      // 关闭加载中 loading
      this.loading = false;
    },

    // 删除流量分析
    onDeleteFlows(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        deleteFlows(id).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.loadFlows();
        }).catch(err => {
          console.log("获取数据失败" + err);
          this.$message({
            message: '删除失败'
          });
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 分页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    handleSizeChange(val) {
      this.pagesize = val;
      this.currentPage = 1
    },
  }
}
</script>
  
<style scoped lang="less">
.filter-card {
  margin-bottom: 30px;
}

.list-table {
  margin-bottom: 20px;
}

.article-cover {
  width: 60px;
  background-size: cover;
}
</style>
  